iT邦幫忙

2022 iThome 鐵人賽

DAY 2
0
Modern Web

Collage版的web寫法就是大雜燴系列 第 2

DAY2-環境安裝-

  • 分享至 

  • xImage
  •  

環境的安裝就看大家的電腦狀況做選擇~
小女子因為~ COCO 的問題~以下都是WINDOWS的作法~
有錢的MAC派就要….QQ

回到下載專區-
https://www.apachefriends.org/zh_tw/download.html

裡面的內容+我放的位置-
https://ithelp.ithome.com.tw/upload/images/20220902/20119035GrBUiv5Hs2.png

打開的長相
https://ithelp.ithome.com.tw/upload/images/20220902/20119035pM39Ozqkt6.png

要按成start的是—按了start會有防火牆再按-是-就可以~
因為按了start所以才會顯示成stop喔~ 大家可以玩看看XD
Apache和MySQL
https://ithelp.ithome.com.tw/upload/images/20220902/20119035nhOXszSFBA.png

在確認按裝好了後~

先確認是否可以連線-
https://ithelp.ithome.com.tw/upload/images/20220902/20119035upWZJBWDcU.png
到這個網站—按phpMyAdmin(右上那顆)

http://localhost:8012/dashboard/

按完後的樣子-

https://ithelp.ithome.com.tw/upload/images/20220902/201190352pgrlBhaDR.png

先來講解學習語言的部分
這裡以留言板的CODE作範例~
~看到昨天有人留言開心

把學習語言該有的基本概念都說完~再繞回來實際操作

才不會打著連自己也看不懂的CODE~

這裡使用的編輯器是VS CODE-
也來小小帶過~

起手式 裝好的樣子-
https://ithelp.ithome.com.tw/upload/images/20220902/201190352UIYiwThDQ.png

VS CODE的版本有很多種~ 編編之前學C#有用過紫色~也有藍色~
這裡PHP就用藍色~至於顏色的差別~每個人說法不同~
反正就是都可以用 0.0A

然後要加裝一些好用的套件(小幫手).這些是書上 沒有寫到的~
編編覺得如果有編輯器幫忙提示哪裡報錯真的很重要~
有時一個BUG找一天還找不到>”<

推薦要裝的小幫手:
1-

CHINESE 中文這個很重要~已經在學新語言了~ 先從母語開始~
https://ithelp.ithome.com.tw/upload/images/20220902/201190354ekadIe1Nh.png

2-

Bracket Pair Colorizer-這個要選1的
https://ithelp.ithome.com.tw/upload/images/20220902/201190350K8voqfFsi.png
3- CSS Peek
4- HTML CSS Support
5- IntelliSense for CSS class names in HTML
6- PHP Intelephense -終於裝到 這隻大象了~感動
https://ithelp.ithome.com.tw/upload/images/20220902/20119035op5PTVK0h4.png

7- 先產生個~html檔看看有沒有裝好
https://ithelp.ithome.com.tw/upload/images/20220902/20119035jnNJw4859l.png

這是預計要產生的樣子~
怎麼變出來的呢?
7-1
https://ithelp.ithome.com.tw/upload/images/20220903/20119035VyZRr82apI.png

7-2 看到這個是因為預設是 .txt就是筆記本檔
https://ithelp.ithome.com.tw/upload/images/20220903/20119035JYoS8CNG45.png

7-3存檔-改成.html檔就可以

https://ithelp.ithome.com.tw/upload/images/20220903/20119035bqciRzFNMW.png

7-4改成html原來上面寫的字就不見了
https://ithelp.ithome.com.tw/upload/images/20220903/201190352yFPr4hF6C.png

7-5網頁的速寫模式-
https://ithelp.ithome.com.tw/upload/images/20220903/20119035ALKpCTJOwP.png

8- 按!+tab
https://ithelp.ithome.com.tw/upload/images/20220903/20119035XwRYKbdwGy.png

9- 就會有內容都跑出來
https://ithelp.ithome.com.tw/upload/images/20220903/20119035XI70aori4G.png

細部內容明天講~順便接到語法~GOGO~SEE YOU
/images/emoticon/emoticon20.gif


上一篇
DAY1-介紹動機-
下一篇
DAY3-語法開始~HELLO
系列文
Collage版的web寫法就是大雜燴30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言